<template>
    <view  class="calculateP" >

      <!-- <u-navbar
      :is-back="true"
      :custom-back="BackM"
      title="修改计费方式"
      back-text="">
	  </u-navbar> -->
	  <view style="font-size: 0.72rem;font-family: PingFang SC;font-weight: 300;color: #000000;
	  text-align: center;padding: 0.3rem;">-门店计费方式-</view>

        <view class="inputS">
			<u-form :model="form" ref="uForm">
				<u-form-item style="padding: 0.7rem 1rem" prop="intro" label-width="auto" label="计费模式:">
					<view  class="modal"  >
						<u-radio-group v-model="typeValue" @change="radioGroupChange">
							<u-radio  active-color="#02af74" v-for="(item, index) in typeList" :key="index" 
								:name="item.name" :disabled="item.disabled" > {{item.name}} </u-radio>
						</u-radio-group>
					</view>
				</u-form-item>
			   
				<u-form-item style="padding: 0.7rem 1rem" prop="intro" label-width="auto" label="计费单价(元):">
					<u-input placeholder='请填写计费单价，单位元' v-model="billingPrice"/>
				</u-form-item>
				<u-form-item style="padding: 0.7rem 1rem" prop="intro" label-width="auto" label="封顶值(元):">
					<u-input placeholder='封顶值大于单价，小于99元' v-model="billingMaxPrice"/>
				</u-form-item>
			</u-form>
        </view>

		<view class="footP" >
			<view  @click="submitM" style="padding: 0.7rem;display: flex;align-items: center;" >
				<view  style="color: white;margin-left: 0.2rem;">提交</view>
			</view>
		</view>
  
    </view>
</template>

<script lang="ts">
    import { Component, Vue } from 'vue-property-decorator';

    import { saveShopInfo } from "../../utils/uniApi";

    import {AppModule} from '../../store/modules/app';

    @Component
    export default class  extends Vue {
        
    public form = {
    name: "",
    intro: "",
    sex: "",
    };

    public billingPattern:any;  //计费方式

    public billingPrice:any  ////计费单价

    public billingMaxPrice:any  //封顶值
	
	public typeValue:any;//计费方式的modelvalue
	
	public shopId:any;//商户id
	
    typeList=[
		{
			name: '30分钟计费制度',
			disabled: false
		},
		{
			name: '60分钟计费制度',
			disabled: false
		}
		
	];
	
	onLoad(value:any){
		var shopDic = JSON.parse(decodeURIComponent(value.shopDic))
		this.shopId = shopDic.id;
		this.billingPrice = shopDic.billingPrice;
		this.billingMaxPrice = shopDic.billingMaxPrice;
		this.billingPattern = shopDic.billingPattern
		if(this.billingPattern == 1){
			this.typeValue = this.typeList[0].name
		}else{
			this.typeValue = this.typeList[1].name
		}
	}

    radioGroupChange(data:any){
        console.log('选择',data)
        if(data==this.typeList[0].name){
            this.billingPattern=1
        }else{
            this.billingPattern=2
        }
    }
	
	
	//返回
    BackM(){
      uni.navigateBack({
      delta: 1,
    });

    }

    submitM(){
    
		// billingPattern		计费模式（1:30分钟,2:60分钟）
		// billingPrice		计费单价
		// billingMaxPrice		计费封顶价

		let params={
		  id:parseInt(this.shopId),
		  billingPattern:this.billingPattern,//	计费模式（1:30分钟,2:60分钟）
		  billingPrice:this.billingPrice,	//	计费单价
		  billingMaxPrice:this.billingMaxPrice,		//计费封顶价
		}
		console.log('修改计费方式参数'+JSON.stringify(params))
		
		saveShopInfo(params).then((res:any)=>{
		   console.log('++++修改商户计费方式',JSON.stringify(res))
		   if(res.data.code==200){
			   //提交成功后    返回
			   uni.navigateBack({
				   delta: 1,
			   });
		   }else{
		   
		   }
		   
		})
    }



    }


</script>

<style scoped>
.calculateP {
  background-color: #f4f5f7;
}

.inputS {
  background-color: white;
}

.modal {
}
/* 
.modal-item :nth-child(2){
font-size: 0.7rem;
font-family: PingFang SC;
font-weight: 300;
color: #000000;
}

.modal-item :nth-child(1){
 width: 1rem;
 height: 1rem;
 padding: 0.2rem;
} */
.modal-item {
  display: flex;
  align-items: center;
}
.footP {
  position: absolute;
  bottom: 0;
  background-color: #02af74;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
</style>